fix: rsbuild issues #3152
fix: rsbuild issues #3152
Conversation
Raubzeug
requested review from
adameat,
artemmufazalov and
astandrik
as code owners
There was a problem hiding this comment.
Pull request overview
This PR fixes rsbuild-related issues by addressing Redux serialization warnings and FOUC (Flash of Unstyled Content) in development.
- Serializes error objects in RTK Query to make them Redux-compatible
- Configures rsbuild to inline CSS in development mode to prevent FOUC
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/store/reducers/capabilities/capabilities.ts | Adds error serialization for getMetaCapabilities to prevent Redux non-serializable value warnings |
| rsbuild.config.ts | Configures injectStyles to inline CSS in development mode to prevent flash of unstyled content |
Comments suppressed due to low confidence (1)
src/store/reducers/capabilities/capabilities.ts:18
- The
getClusterCapabilitiesendpoint has the same non-serializable error issue asgetMetaCapabilities. Apply the same error serialization fix here to prevent Redux warnings:const serializedError = error instanceof Error ? {message: error.message, name: error.name} : error; return {error: serializedError};
} catch (error) {
// If capabilities endpoint is not available, there will be an error
// That means no new features are available
return {error};
| return {error}; | ||
| // Serialize the error to make it Redux-compatible | ||
| const serializedError = | ||
| error instanceof Error ? {message: error.message, name: error.name} : error; |
There was a problem hiding this comment.
The error serialization is incomplete. Error objects may contain additional important properties like stack and custom properties. Consider including stack for debugging: error instanceof Error ? {message: error.message, name: error.name, stack: error.stack} : error. Alternatively, use a more robust serialization utility.
| error instanceof Error ? {message: error.message, name: error.name} : error; | |
| error instanceof Error | |
| ? {message: error.message, name: error.name, stack: error.stack, ...error} | |
| : error; |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Additional Comments (1)
-
src/store/reducers/capabilities/capabilities.ts, line 18 (link)logic: Same error serialization issue exists here -
getClusterCapabilitiesreturns raw error object which may not be Redux-compatible
2 files reviewed, 1 comment
Screen.Recording.2025-12-01.at.18.06.17.MOV
Greptile Overview
Greptile Summary
This PR fixes two issues introduced by the rsbuild migration: CSS flash of unstyled content (FOUC) in development and Redux error serialization issues.
injectStyles: truefor development builds to prevent FOUC by inlining CSSgetMetaCapabilitiesto make them Redux-compatible by extractingmessageandnameproperties from Error instancesHowever, the same error serialization issue still exists in
getClusterCapabilities(line 18) which was not addressed in this PR.Confidence Score: 3/5
getMetaCapabilitieswas fixed whilegetClusterCapabilitieshas the same issue. This inconsistency could cause similar Redux warnings/errors when the cluster capabilities endpoint fails.src/store/reducers/capabilities/capabilities.ts- thegetClusterCapabilitiesfunction needs the same error serialization fixImportant Files Changed
File Analysis
getClusterCapabilitiesstill returns unserializable errorsSequence Diagram
sequenceDiagram participant App as Application participant Store as Redux Store participant API as RTK Query API participant Backend as YDB Backend Note over App,Backend: Build Configuration (rsbuild.config.ts) App->>App: Development Mode App->>App: injectStyles=true (inline CSS) Note over App: Prevents FOUC during hot reload Note over App,Backend: Capabilities API (capabilities.ts) App->>Store: Request Meta Capabilities Store->>API: getMetaCapabilities() API->>Backend: window.api.meta.getMetaCapabilities() alt Success Backend-->>API: Capabilities Data API-->>Store: {data: capabilities} Store-->>App: Capabilities Available else Error (Fixed) Backend-->>API: Error API->>API: Serialize Error (message, name) API-->>Store: {error: {message, name}} Store-->>App: No Capabilities (Graceful) end App->>Store: Request Cluster Capabilities Store->>API: getClusterCapabilities() API->>Backend: window.api.viewer.getClusterCapabilities() alt Success Backend-->>API: Capabilities Data API-->>Store: {data: capabilities} Store-->>App: Capabilities Available else Error (Not Fixed) Backend-->>API: Error Object API-->>Store: {error: Error} ⚠️ Note over Store: Unserializable Error<br/>May cause Redux warnings endCI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ⏭️2
⏭️ Skipped Tests (2)
Bundle Size: ✅
Current: 62.32 MB | Main: 62.32 MB
Diff: +0.34 KB (0.00%)
✅ Bundle size unchanged.
ℹ️ CI Information